<template>
    <div class="portal-detail-container"
         v-loading="loading"
         element-loading-text="数据加载中, 请稍后..."
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.1)">
        <div class="selected-students" v-if="selected && selected.length">
            <div class="label">已选：</div>
            <el-tag
                v-for="s in selected"
                :key="s.user_id"
                closable
                @click="removeSelected">
                {{s.user_name}}
            </el-tag>
            <el-button type="primary" class="selected-subbtn" size="small" @click="save()"> 确定 </el-button>
        </div>
        <div class="query-search-thin">
            <el-form :inline="true" size="mini">
                <el-form-item>
                    <!--<el-input v-model="form.teacher_name" clearable placeholder="老师姓名" style="width:150px;"></el-input>-->
                    <el-input placeholder="请输入内容" v-model="queryStr" class="input-with-select">
                        <!--<el-select v-model="queryType" slot="prepend" placeholder="请选择" style="width:85px;">
                            <el-option label="姓名" value="1"></el-option>
                            <el-option label="手机号" value="2"></el-option>
                        </el-select>-->
                        <el-button slot="append" icon="el-icon-search" @click="refresh()"></el-button>
                    </el-input>
                </el-form-item>
                <!--<el-form-item>
                    <el-select v-model="form.gender" placeholder="选择性别" clearable style="width:100px;" @change="refresh">
                        &lt;!&ndash;<el-option label="所有" value=""></el-option>&ndash;&gt;
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="2"></el-option>
                    </el-select>
                </el-form-item>-->
            </el-form>
        </div>
        <div class="table-wrapper">
            <el-table
                :data="list"
                border
                class="mp-table"
                style="width: 100%">
                <el-table-column
                    prop="avatar"
                    label="头像">
                    <template slot-scope="scope">
                        <file-thumb theme="mini"
                                     :url="scope.row.avatar"></file-thumb>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="user_name"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    prop="gender"
                    width="80"
                    label="性别">
                    <template slot-scope="scope">
                        {{ scope.row.gender | genderLabel }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="注册时间">
                </el-table-column>
                <el-table-column
                    prop="mobile"
                    label="手机号">
                    <template slot-scope="scope">
                        <div class="tb-cell-editable">
                            <label>{{ scope.row.mobile }}</label>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <div v-if="isSelected(scope.row)" class="has-selected">已选</div>
                        <el-button
                            v-else
                            size="mini"
                            type="text"
                            @click="handleSelect(scope.row, scope.$index)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            @size-change="refresh"
            @current-change="refresh"
            :current-page.sync="pagination.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size.sync="pagination.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="pagination.count">
        </el-pagination>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import _ from 'lodash';
    import axios from 'axios';

    export default {
        props: [ "show", "users", "isSingle" ],
        data() {
            return {
                form: {
                    gender: '',
                },
                queryType: '1',
                queryStr: '',

                selected: [],
                list: [],
                loading: false,
                pagination: {
                    current: 1,
                    pageSize: 10,
                    count: 0
                },
            }
        },
        components: {

        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            // this.groupId = this.$route.params.groupId;
            this.init();
            this.refresh();
        },
        watch: {
            '$route' (to, from) {
                // this.groupId = this.$route.params.groupId;
                // this.refresh();
            },
            'show'(val) {
                if(val) {
                    this.init();
                }
            }
        },
        filters: {
            genderLabel( type ) {
                if( type == 1) {
                    return '男';
                } else if(type == 2) {
                    return '女';
                } else {
                    return '未知';
                }
            }
        },
        computed: {
            ...mapState([
                'loginUser'
            ])
        },
        methods: {
            ...mapActions([
            ]),
            init() {
                this.selected = [];
            },
            async refresh() {

                let param = {
                    status: 1
                };

                if(this.queryType === "1") {
                    param.user_name = this.queryStr;
                } else {
                    param.mobile = this.queryStr;
                }

                let data = await this.$japi.user.getList(_.assign({
                    page: this.pagination.current,
                    pageSize: this.pagination.pageSize
                }, this.form, param));

                this.parseDatas(data);
            },
            parseDatas(data) {
                this.pagination.count = _.get(data, 'count', 0);

                let list = _.get(data, 'rows', []);

                this.list = list;
            },
            closeWin(flag){

                this.showCreate = false;
                if(flag) {
                    this.refresh();
                }
            },
            handleSelect(s) {

                if(!s || !s.user_id) {
                    return;
                }

                if(_.find(this.selected, { user_id: s.user_id })) {
                    return;
                }

                this.selected.push(s);

                if(this.isSingle) {
                    this.save();
                }
            },
            removeSelected(sid) {
                if(!sid) {
                    return;
                }

                let idx = _.findIndex(this.selected, { user_id: sid });

                if(idx < 0) {
                    return;
                }

                this.selected.splice(idx, 1);
            },
            isSelected(t) {

                let isSel = false;

                if(!t || !t.user_id) {
                    return false;
                }

                isSel = _.find(this.selected, {
                    user_id: t.user_id
                });

                if(!isSel) {
                    isSel = _.find(this.users, {
                        user_id: t.user_id
                    });
                }

                return isSel;
            },
            save() {
                this.$emit('close', this.selected);
            }
        }
    }
</script>

<style lang="scss" scoped>
.selected-students {
    padding-bottom: 5px;
    padding-right: 80px;
    position: relative;
    border-bottom: 1px solid #EEE;
    margin-bottom: 10px;

    .label {
        position: absolute;
        top: -24px;
        color:#AAA;
        padding-left: 0px;
    }

    .el-tag {
        margin-right: 10px;
        margin-bottom: 5px;
    }

    .selected-subbtn {
        position: absolute;
        right:0px;
        top:0px;
    }
}
.has-selected {
    font-size: 13px;
    color: #CCC;
}
</style>
